<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">

    <el-button size="mini"
               @click="dialogFormVisible=true">添加
    </el-button>
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="id"
                prop="id">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="username">
        </el-table-column>
        <el-table-column
                label="地址"
                prop="address">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header">
                <el-input @keyup.enter.native="pagehelper"
                          v-model="input"
                          size="mini"
                          placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="warning"
                        @click="handleEdit(scope.$index, scope.row.id)">修改
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row.id)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.params.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="this.params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
    </el-pagination>
</div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data(){
            return {
                formLabelWidth: "",
                tableData: [],
                search: '',
                update: false,
                dialogFormVisible: false,
                form: {
                    id: '',
                    username: '',
                    address: '',
                },
                input: '',
                total: 1,
                params: {
                    page: 1,
                    size: 3,
                },
            }
        },
        methods: {
            handleSizeChange(val) {
                this.params.size = val;
                this.pagehelper();
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.pagehelper();
            },
            pagehelper() {
                axios.get("../order/test/", {  //params参数必写 , 如果没有参数传{}也可以
                    params: {
                        pageNum: this.params.page,
                        pageSize: this.params.size,
                        input: this.input
                    }
                }).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.total
                })
            },
            findName() {
                axios.get('../order/findName?name=' + this.search).then(res => {
                    this.pagehelper()
                })
            },
            handleDelete(index, row) {
                axios.get('../order/delById?id=' + row).then(res => {
                    this.pagehelper();
                })
            },
            add() {
                axios.post('../order/save',this.form).then(res => {
                    this.pagehelper();
                    this.dialogFormVisible = false;
                })
            }
        },
        created: function () {
            //this.findAll()
            this.pagehelper();
        }
    })
</script>
</html>